var suibo = function(time) {
    setTimeout(function() {

        var canvas = {},
            centerX = 0,
            centerY = 0,
            color = '',
            containers = document.getElementsByClassName('material-design-other'),
            context = {},
            element = {},
            radius = 0,

            requestAnimFrame = function() {
                return (
                    window.requestAnimationFrame ||
                    window.mozRequestAnimationFrame ||
                    window.oRequestAnimationFrame ||
                    window.msRequestAnimationFrame ||
                    function(callback) {
                        window.setTimeout(callback, 1000 / 60);
                    }
                );
            }(),

            init = function() {
                containers = Array.prototype.slice.call(containers);
                for (var i = 0; i < containers.length; i += 1) {
                    canvas = document.createElement('canvas');
                    canvas.style.cssText = "position:absolute;top:0;right:0;bottom:0;left:0;";
                    canvas.addEventListener('click', press, false);
                    containers[i].appendChild(canvas);
                    canvas.style.width = '100%';
                    canvas.style.height = '100%';
                    canvas.width = canvas.offsetWidth;
                    canvas.height = canvas.offsetHeight;
                }
            },

            press = function(event) {
                for (var i = 0; i < containers.length; i++) {
                    containers[i].lastChild.getContext('2d').clearRect(0, 0, 1000, 1000);
                }
                color = event.toElement.parentElement.dataset.color;
                element = event.toElement;
                context = element.getContext('2d');
                radius = 0;
                centerX = event.offsetX;
                centerY = event.offsetY;
                context.clearRect(0, 0, element.width, element.height);
                draw();
            },

            draw = function() {
                context.beginPath();
                context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
                context.fillStyle = color;
                context.fill();
                //这里是控制扩撒速度
                radius += time;
                //这里 -35 去掉就是扩散整个按钮
                if (radius < (element.width - 35)) {
                    requestAnimFrame(draw);
                } else {
                    context.clearRect(0, 0, 1000, 1000)
                }
            };

        init();
    }, 500);
}